<template>
	<view class="mask" v-if="pop">
	</view>
	<view class="mesInf" v-if="pop">
		<uni-icons type="close" size="40" @click="offPop" class="offBtn" color="white"></uni-icons>
	</view>
	<view class="Infbox">
		<view class="genealogy-tree">
			<movable-area>
				<movable-view @scale="changeScale" :scale="true" :scale-max="1" :scale-min="0.1" :scale-value='scale'
					direction="all" class="max"
					:style="{width: `${treeConfig.width}vw`,height: `${treeConfig.height}vh`}">
					<view class="tree-content">
						<tree-list :tree-data="treeData" :tree-first="true" />
					</view>
				</movable-view>
			</movable-area>
		</view>
	</view>

</template>

<script setup>
	import {
		ref,
		provide,
		nextTick,
		watch,
		getCurrentInstance,
		onMounted
	} from 'vue';
	import {
		getClanTreeData
	} from '@/apis/clanTree.js'

	import {
		useClanTreeStore
	} from '@/store/index.js'
	const useClanTree = useClanTreeStore();

	let scale = ref(0.5); // 缩放倍率
	let timer = ref(null); // 节流定时器
	const instance = getCurrentInstance(); // 获取组件实例
	let treeConfig = ref({ // movable-view移动区域大小
		width: 90,
		height: 90,
	})

	const pop = ref(0)




	/**
	 * 获取元素信息
	 * @param {String} domID dom元素id
	 * */
	const getDomInfo = (domID) => {
		return new Promise((resolve, reject) => {
			const bar = uni.createSelectorQuery().in(instance);
			bar.select(domID).boundingClientRect(res => {
				if (res) resolve(res);
				else reject()
			}).exec();
		})
	}
	// 树形结构数据
	const treeData = ref();
	treeData.value = useClanTree.clanTreeData
	// 删除
	// provide('delItem', (item) => {
	// 	treeData.value = deleteNodeById(treeData.value, item.id);
	// })
	/**
	 * 添加
	 * @param { object } item 当前点击的对象
	 * @param { number } type 0添加子级，1添加兄弟，2添加父辈，3添加自己
	 * */
	// provide('addItem', (item, type) => {
	// 	handleData(item.id, treeData.value, {
	// 		id: Math.floor(Math.random() * (100 - 10 + 1)) + 10, // 唯一键后续自行设置
	// 		name: '新来的',
	// 	})
	// })
	provide('checkDetail', (item, type) => {
		getMemberDetail(item.id)
	})

	onMounted(() => {
		console.log(useClanTree.clanTreeData)
		console.log(treeData.value)
		getTreeData(1)
		setTreeConfig()
	})
	// 监听树形结构数据变化
	watch(treeData.value, (newVal, oldVal) => {
		setTreeConfig()
	})
	// 设置移动缩放大小
	const setTreeConfig = () => {
		console.log(treeData.value)
		nextTick(() => {
			setTimeout(() => {
				getDomInfo('.tree-content').then(res => {
					Object.assign(treeConfig.value, {
						width: res.width / scale.value,
						height: res.height / scale.value
					});
				})
			}, 100)
		})
	}
	// /**
	//  * 递归对树形结构添加节点
	//  * @param {number | string} id 唯一键
	//  * @param { Array } 树形结构数组
	//  * @param { Object } obj 添加的数据
	//  * */
	// const handleData = (id, data, obj) => {
	// 	data.forEach(item => {
	// 		if (item.id === id) {
	// 			item.children ? item.children.push(obj) : item.children = [obj]
	// 		} else {
	// 			if (item.children) {
	// 				handleData(id, item.children, obj)
	// 			}
	// 		}
	// 	})
	// 	return data
	// }
	// /**
	//  * 递归删除树形结构元素
	//  * @param { Array } tree 树形结构数据
	//  * @param { number | string } id 唯一键
	//  * */
	// const deleteNodeById = (tree, targetId) => {
	// 	for (let i = 0; i < tree.length; i++) {
	// 		const node = tree[i];
	// 		if (node.id === targetId) {
	// 			console.log('找到了', node);
	// 			// 使用 splice 删除节点
	// 			tree.splice(i, 1);
	// 			return tree; // 返回新的数组
	// 		}
	// 		if (node.children && node.children.length > 0) {
	// 			// 递归查找子节点
	// 			node.children = deleteNodeById(node.children, targetId);
	// 		}
	// 	}
	// 	return tree; // 没有找到目标节点，返回原数组
	// }

	// const treeId = 1;
	const getTreeData = async (treeId) => {
		await getClanTreeData(treeId).then((res) => {
			console.log(res)
			treeData.value = res.data
		})
	}

	const getMemberDetail = (id) => {
		pop.value = 1
		console.log("11")
	}
	const offPop = () => {
		pop.value = 0;
	}
</script>

<style lang="scss" scoped>
	.mask {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 998;
	}



	.mesInf {
		position: fixed;
		height: 80vh;
		width: 80vw;
		border-bottom-left-radius: 20px;
		border-bottom-right-radius: 20px;
		z-index: 999;
		top: 10vh;
		left: 10vw;
		background-color: antiquewhite;

		.offBtn {
			all: unset;
			border: none;
			position: absolute;
			bottom: -100rpx;
			left: 50%;
			transform: translateX(-50%);
		}
	}

	.Infbox {
		height: 90vh;
		width: 90vw;
		overflow: hidden;
		background-color: antiquewhite;


		.genealogy-tree {
			min-height: 100%;
			min-width: 100%;
			position: relative;
			// overflow-x: scroll;
			// overflow-y: scroll;

			.tree-content {

				position: absolute;
				top: 0;
				left: 0;
				transition: all 2.3s;
			}
		}
	}
</style>